<template>
  <div class="v-pay">
    <div class="order-total-top">
      <div class="order-total-top-total">
        <div class="order-total-label">
          {{$t('message.totalPrice')}}：
        </div>
        <div class="order-total-price">
          {{ $t('message.currencySymbol') }}
          {{ payVal }}
        </div>
      </div>
      <div class="order-total-top-freight">
        <div class="order-total-label">
          {{$t('message.freight')}}：
        </div>
        <div class="order-total-price">
          {{ $t('message.currencySymbol') }} 0.00
        </div>
      </div>
      <div class="order-total-top-freight">
        <div class="order-total-label promotion-code" @click="showInput2">
          <i class="icon-arrow-down" :class="{'hover' : showInput}" v-if="this.$route.name === 'buy'"></i>
          {{$t('message.promotionCode')}}：
        </div>
        <div class="order-total-price">
          -{{ $t('message.currencySymbol') }} {{markdown}}
        </div>
      </div>
      <div class="order-total-top-freight" v-if="showInput">
        <input type="text" v-model="code" :placeholder="$t('message.promotionCodeHolder')">
        <span class="getBtn" @click="check">{{$t('message.exchange')}}</span>
        <div class="clear"></div>
        <div class="tips" v-if="showTips">{{tips}}</div>
      </div>
    </div>
    <div class="order-total-bottom">
      <div class="order-total-label order-total-label-payment">
        {{$t('message.sum')}}：
      </div>
      <div class="order-total-amount">
        {{ $t('message.currencySymbol') }}
        {{ finallyPay }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'VPay',
    props: {
      // 初始价格
      pay: {
        type: [String, Number],
        default: 0
      },
      // 优惠价格
      markdowns: {
        type: [String, Number],
        default: 0
      }
    },
    watch: {
      code () {
        if (this.code === '') {
          this.markdown = 0
          this.price = 0
          this.showTips = false
          this.$emit('dataSend', this.code)
        }
      }
    },
    data () {
      return {
        markdown: '0.00',
        show: false,
        showInput: false,
        tips: this.$t('message.canNoUsePromotionCode'),
        code: '',
        showTips: false,
        price: 0
      }
    },
    created () {
      this.markdown = this.markdowns
    },
    computed: {
      finallyPay () {
        var n
        if (typeof (this.pay) === 'string' && this.pay.indexOf(',') > -1) {
          n = this.pay.replace(',', '')
        } else {
          n = this.pay
        }
        if (parseFloat(this.markdown) > parseFloat(n) || parseFloat(this.markdown) === parseFloat(n)) {
          return '1.00'
        }
        if (this.$route.name === 'buy') {
          if (this.price) {
            return (parseFloat(n) - this.price).toFixed(2)
          } else {
            return parseFloat(n).toFixed(2)
          }
        } else {
          return (parseFloat(n) - this.markdowns).toFixed(2)
        }
      },
      payVal () {
        if (typeof (this.pay) === 'string') {
          return this.pay
        } else {
          return parseFloat(this.pay).toFixed(2)
        }
      }
    },
    methods: {
      showInput2 () {
        if (this.$route.name === 'buy') {
          this.showInput = !this.showInput
        }
      },
      check () {
        if (this.code) {
          this.$ajax.checkPromotionCode(this.code).then(res => {
            if (res.code === 205) {
              this.showTips = true
              this.price = 0
              this.$emit('dataSend', '')
              this.markdown = 0
              this.tips = this.$t('message.promotionCodeUsed')
            } else if (res.code === 204) {
              this.showTips = true
              this.markdown = 0
              this.$emit('dataSend', '')
              this.tips = this.$t('message.promotionCodeOverTime')
              this.price = 0
            } else if (res.code === 200) {
              this.showTips = true
              this.tips = this.$t('message.canUsePromotionCode')
              this.price = parseFloat(res.data.price)
              var n
              if (typeof (this.pay) === 'string' && this.pay.indexOf(',') > -1) {
                n = this.pay.replace(',', '')
              } else {
                n = this.pay
              }
              if (this.price > parseFloat(n) || this.price === parseFloat(n)) {
                this.price = parseFloat(n) - 1
              }
              this.$emit('dataSend', this.code)
              this.markdown = res.data.price
            } else {
              this.showTips = true
              this.price = 0
              this.markdown = 0
              this.$emit('dataSend', '')
              this.tips = this.$t('message.canNoUsePromotionCode')
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  .clear {
    content: '';
    display: block;
    height: 1px;
    clear: both;
  }
  .tips {
    float: left;
    margin-left: 150px;
    padding-left: 22px;
    margin-top: 12px;
    color: #FF600A;
    font-size: 14px;
    background: url('../../assets/images/icon_errorTips.png') no-repeat 2px;
  }
  input {
    width: 170px;
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    border: 1px solid #d7d7d7;
    box-sizing: border-box;
    font-size: 14px;
    color: #333;
    border-radius: 0px;
  }
  .getBtn {
    cursor: pointer;
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    background-color: #FF600A;
    color: #fff;
    display: inline-block;
    padding: 0 28px;
    margin-left: -5px;
    margin-top: -2px;
  }
  .getBtn:hover {
    background-color: #ff3c00;
  }
  .v-pay {
    width: 400px;
    line-height: 20px;
    font-size: 14px;
    color: #333;
    text-align: right;
  }

  .v-pay .order-total-top {
    padding-bottom: 24px;
    border-bottom: 1px solid #e6e6e6;
  }

  .v-pay .order-total-label {
    float: left;
    width: 185px;
    height: 20px;
  }

  .v-pay .order-total-price {
    float: left;
    width: 215px;
    height: 20px;
  }

  .order-total-top .order-total-top-total {
    overflow: hidden;
  }

  .order-total-top .order-total-top-freight {
    overflow: hidden;
    margin-top: 24px;
  }

  .v-pay .order-total-bottom {
    margin-top: 24px;
    overflow: hidden;
  }

  .order-total-bottom .order-total-label-payment {
    margin-top: 5px;
  }

  .order-total-bottom .order-total-amount {
    float: left;
    width: 215px;
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    color: #ff600a;
  }
  .icon-arrow-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid #333;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    transition: all .3s;
    margin-bottom: 1px;
    /*transform: rotate(180deg);*/
  }
  .hover {
    transform: rotate(180deg);
  }

  .promotion-code {
    cursor: pointer;
  }
</style>
